<template>
  <div class="core">
    <!-- 导航栏 -->
    <!-- <div class="nav">
      <div
        class="givepoint"
        :class="select == 0 ? 'active' : ''"
        @click="select = 0"
      >
        赠送积分
      </div>
      <div @click="select = 1" :class="select == 1 ? 'active' : ''">
        积分明细
      </div>
    </div> -->
    
    <div class="list-page" v-show="select == 0">
      <Row>
        <div class="toolbar">
          <div style="padding: 0 10px 0 0">
            <Button
              type="primary"
              icon="md-add"
              @click="give()"
              v-if="Validation.check(Resources.MEMBER_UPDATE)"
              >赠送积分
            </Button>
          </div>

          <!-- <Button type="primary" @click="openintegral()">积分明细 </Button> -->

          <DatePicker
            type="daterange"
            placeholder="时间"
            format="yyyy/MM/dd"
            v-model="bloc.form.date"
            :editable="false"
            style="width: 200px; margin: 0 10px"
          ></DatePicker>
          <Button
            type="primary"
            icon="ios-search"
            style="margin-right: 10px"
            size="default"
            @click="bloc.load(1, bloc.paged.pageSize)"
            >查询
          </Button>
          <Button
            icon="md-refresh"
            style="margin-right: 10px"
            size="default"
            @click="bloc.reset()"
            >重置</Button
          >
        </div>
      </Row>

      <Row>
        <Table
          border
          :loading="bloc.loading"
          :columns="columns"
          highlight-row
          :data="bloc.paged.items"
        >
          <slot name="footer" slot="footer">
            <Page
              show-elevator
              show-total
              show-sizer
              :total="bloc.paged.itemCount"
              :current="bloc.paged.pageIndex"
              :page-size="bloc.paged.pageSize"
              :page-size-opts="[15, 30, 50, 100]"
              @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
              @on-page-size-change="
                (val) => bloc.load(bloc.paged.pageIndex, val)
              "
            />
          </slot>
        </Table>
      </Row>
      <Modal
        title="赠送积分"
        v-model="bloc.givesymbol"
        class-name="vertical-center-modal"
        @on-cancel="cancel"
      >
        <p slot="header">
          <span>赠送积分</span>
        </p>
        <p v-if="bloc.agentBalance" style="text-align: center">
          当前账号剩余积分：{{ bloc.agentBalance }}
        </p>
        <div style="text-align: center">
          赠送积分:
          <Input v-model="bloc.givePoint" style="width: 205px" />
        </div>
        <div slot="footer">
          <AppButton ref="save" type="primary" @click="Submit()"
            >确定</AppButton
          >
        </div>
      </Modal>
    </div>
    <div v-show="select == 1" class="table">
      <Table :columns="columns1" :data="data1" border></Table>
      <!-- <div class="page">
        <div></div>
        <Page :total="total" @on-change="changePage" />
      </div> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Route } from "vue-router";
import { GivePointBloc } from "@/view/member/bloc/GivePointBloc";
import { Member } from "@/base/model/Member";
import { formatDate } from "@/base/util/Dates";
import CompanySelector from "@/component/CompanySelector.vue";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";
import { isEmpty } from "@/base/util/Strings";
import { store } from "@/store/Store";
import { integral } from "@/base/api/MemberApi";

const columns = (bloc: GivePointBloc) => [
  {
    title: "赠送人",
    key: "orderNum",
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText: isEmpty(params.row.orderNum)
            ? "平台"
            : params.row.orderNum,
        },
      });
    },
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
  {
    title: "积分",
    key: "point",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
  {
    title: "时间",
    key: "time",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
  {
    title: "备注",
    key: "note",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
];

@Component
export default class extends Vue {
  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc.start(vm.idx).catch((e) => {
        vm.$Message.error("操作错误");
      });
    });
  }
  get idx() {
    return Number(this.$route.params.id);
  }
  select: number = 0;
  pageSize: number = 0;
  pageIndex: number = 0;
  columns1: any = [
    {
      title: "按摩签到",
      key: "note",
    },
    {
      title: "积分",
      key: "point",
    },
    {
      title: "按摩次数",
      key: "positive",
    },
    {
      title: "按摩时间",
      key: "time",
    },
  ];
  data1: any = [];
  total: number = 100;
  bloc: GivePointBloc = new GivePointBloc();
  columns = columns(this.bloc);
  Validation = Validation;
  Resources = Resources;

  // get tepee() {
  //     // if (store.state.user.tepee === '2') { // 隐藏经销商栏目
  //     //     this.columns = this.columns.filter(column => column.key !== 'agentName');
  //     // }
  //     return store.state.user.tepee
  // }
  give() {
    this.bloc.queryBalance().catch((e) => {
      this.$Message.error("获取余额失败");
    });
    this.bloc.givesymbol = true;
  }

  Submit() {
    if (
      (store.state.user.tepee === "1" && this.bloc.givePoint !== 0) ||
      (store.state.user.tepee === "2" &&
        this.bloc.givePoint !== 0 &&
        this.bloc.givePoint <= this.bloc.agentBalance)
    ) {
      this.bloc.savePoint().catch((e) => {
        this.$Message.error("赠送积分失败");
      });
    } else if (this.bloc.givePoint === 0) {
      this.$Message.error("不能赠送0积分");
    } else if (
      store.state.user.tepee === "2" &&
      this.bloc.givePoint > this.bloc.agentBalance
    ) {
      this.$Message.error("赠送积分不能超过经销商积分余额");
    }
  }
  cancel() {
    this.bloc.givePoint = 1;
    this.bloc.givesymbol = false;
  }
  //积分会员列表
  integral() {
    integral({
      pageIndex: 1,
      pageSize: 10,
      phone: String(this.$route.query.phone),
    }).then((res) => {
      this.data1 = [];
      //解析数据
      this.data1 = Object(JSON.parse(String(res.data)).list);
      // console.log(this.data1);
    });
  }
  //页码改变
  changePage(data) {
    console.log(data);
  }
  mounted() {
    this.integral();
    this.bloc.start(Number(this.$route.query.id))
  }
}
</script>

<style lang="less">
.nav {
  display: flex;
  margin: 10px 30px;
  font-size: 16px;
  border: 1px solid rgb(240, 240, 233);
  cursor: pointer;
  .givepoint {
    margin: 0 60px;
  }
  .active {
    border-bottom: 2px solid rgb(59, 91, 165);
    color: rgb(59, 91, 165);
  }
  div {
    padding: 10px;
  }
}
.table {
  margin: 30px;
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
